<template>
	<view>
		<!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
		<view :animation="anData" style="height:10px;"></view>
		<!-- 消息体 -->
		<scroll-view scroll-with-animation scroll-y="true" @touchmove="hideKey" style="width: 750rpx;"
			:style="{'height':srcollHeight}" :scroll-top="go">
			<!-- 用来获取消息体高度 -->
			<view id="okk" scroll-with-animation>
				<view style="display: flex;flex-direction: column; align-content: center;" v-for="(x,i) in msgList" :key="i">

					<!--自己发送的问题-->
					<view v-if="x.my" style="display: flex; justify-content: flex-end; margin: 5px 10px;">
						<view style="background-color: #409EFF; border-radius: 8px;">
							<view style="padding: 17rpx 20rpx; color: #f1f1f1;">
								<text style="word-break: break-all;">{{x.msg}}</text>
							</view>
						</view>

						<view
							style="background-color:#409EFF; border-radius: 50px; width: 35px; height:35px;margin-top: 5px; margin-left: 10px;">
							<u-image width="35" height="35" src="@/static/user.png"></u-image>
						</view>
					</view>


					<!--机器人回复-->
					<view v-if="!x.my" style="display: flex;flex-direction: row; align-items: start; padding:5px 0px;">
						<view
							style="background-color:#00aa00; border-radius: 50px;flex-direction:row;justify-content: center; margin-top: 5px; margin-left: 10px;">
							<u-image width="35" height="35" src="@/static/user.png"></u-image>
						</view>
						<view
							style="margin-left:10px;display: flex; flex-direction: column;  background: #f9f9f9;border-radius: 8px;">
							<view style="padding: 17rpx 20rpx;">
								<text style="word-break: break-all;">{{x.msg}}</text>
							</view>
							<!--消息底部功能按钮-->
							<view style="margin: 5px; display: flex;justify-content:flex-end;">
								<u-icon @click="copyContent(x.msg)" name="order" color="#cfcfd1" size="22"></u-icon>
							</view>
						</view>
					</view>
				</view>

			
			</view>
			<!-- 防止消息底部被遮 -->
			<view style="height: 120rpx; background-color: #8c8c8c;"></view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view style="position: fixed;bottom:0px; width: 100%;"
			:animation="animationData">
				<chatInput @send="handleSendMsg" @openHistory="openHistory"></chatInput>
		</view>
		
		<!--历史会话-->
		<u-popup :show="historyVisible" mode="left" @close="closeHistory" closeable>
			<view style="display: flex; width:300px;">
				<view style="font-size: 14px; line-height: 40px; flex:1; text-align: center;padding-right:5px">历史会话</view>
			</view>
			<view class="history-wraper">
				<view style="padding: 0px 20px; overflow-y: auto;">
					<view style="margin-bottom: 20px;">
						<view class="history_section">今天</view>
						<view style="background-color: #FFF; border-radius: 5px;  padding: 2px 5px;">
							<view style="margin-bottom: 10px;" v-for="(item,index) in history.today" :key="index" @click="handleViewHistory(item)">
								<view style="color: #8c8c8c;">{{item.content}}</view>
							</view>
						</view>
					</view>
					<view>
						<view class="history_section">昨天</view>
						<view style="background-color: #FFF; border-radius: 5px;  padding: 2px 5px;">
							<view style="margin-bottom: 10px;" v-for="(item,index) in history.yesterday" :key="index" @click="handleViewHistory(item)">
								<view style="color: #8c8c8c;">{{item.content}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import chatInput from '@/components/chatInput.vue';
	export default {
		components:{
			chatInput
		},
		data() {
			return {
				historyVisible:false,
				l:1,
				wh:960,
				mgUpHeight:0,
				msgLoad: true,
				go: 0,
				srcollHeight:0,
				anData:{},
				animationData: {},
				msgList: [{
						my: false,
						msg: "你好，我是最牛逼的机器人,有什么您可以问我。",
						type: 1,
						questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
					},
					{
						my: true,
						msg: "你好,你数学觉得怎么样?",
						type: 1,
						questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
					},
					{
						my: false,
						msg: "学的还算可以，要不你出道题试试?",
						type: 1,
						questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
					},
					{
						my: true,
						msg: "你知道中国的人口总数吗?",
						type: 1,
						questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
					},
					{
							my: false,
							msg: "你好，我是最牛逼的机器人,有什么您可以问我。",
							type: 1,
							questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
						},
						{
							my: true,
							msg: "你好,你数学觉得怎么样?",
							type: 1,
							questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
						},
						{
							my: false,
							msg: "学的还算可以，要不你出道题试试?",
							type: 1,
							questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
						},
						{
							my: true,
							msg: "你知道中国的人口总数吗?",
							type: 1,
							questionList: ["我想要写一个50字关于花的诗句", "帮我写一个关于催债的律师函", "你觉得我帅吗"],
						}
				],
				msg: ''
			}
		},
		onLoad() {
			uni.onKeyboardHeightChange(res => {
				const query = uni.createSelectorQuery()
				query.select('#okk').boundingClientRect(data => {
					// 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体
					var up = res.height * 2 - data.height - this.l * 110
					if (up > 0) {
						// 动态改变空盒子高度
						this.msgMove(up, 300)
						// 记录改变的值,若不收回键盘且发送了消息用来防止消息过多被遮盖
						this.mgUpHeight = up
					}
					// 收回
					if (res.height == 0) {
						this.msgMove(0, 0)
					}
				}).exec();
			})
			
			var query=uni.getSystemInfoSync()			
			this.l=query.screenWidth/750		
			this.wh=query.windowHeight								
			this.srcollHeight=query.windowHeight+"px"
		},
		methods: {
			openHistory(){
 					this.historyVisible = true;
					this.api.get_history_list({}).then(res=>{
						this.history=res.data;
					})
			
			},
			closeHistory() {
				this.historyVisible = false;
			},
			// 移动顶部的空盒子
			msgMove(x, t) {
				var animation = uni.createAnimation({
					duration: t,
					timingFunction: 'linear',
				})

				this.animation = animation

				animation.height(x).step()

				this.anData = animation.export()
			},
			// 保持消息体可见
			msgGo() {
				const query = uni.createSelectorQuery()
				// 延时100ms保证是最新的高度
				setTimeout(() => {
					// 获取消息体高度
					query.select('#okk').boundingClientRect(data => {
						// 如果超过scorll高度就滚动scorll
						if (data.height - this.wh > 0) {
							this.go = data.height - this.wh
						}
						console.log(this.go)
						// 保证键盘第一次拉起时消息体能保持可见
						var moveY = this.wh - data.height + 200
						// 超出页面则缩回空盒子
						if (moveY - this.mgUpHeight < 0) {
							// 小于0则视为0
							if (moveY < 0) {
								this.msgMove(0, 200)
							} else {
								// 否则缩回盒子对应的高度
								this.msgMove(moveY, 200)
							}
						}

					}).exec();
				}, 100)
			},
			// 回答问题的业务逻辑
			answer(askItem) {
				// 这里应该传入问题的id,模拟就用index代替了
				console.log("问题吗这里是", askItem)
				this.msg = askItem;
				this.sendMsg();
			},
			handleSendMsg(msg){
				this.msg=msg;
				this.sendMsg();
			},
			sendMsg() {
				console.log('发送消息');
				// 消息为空不做任何操作
				if (this.msg == "") {
					return 0;
				}
				// 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插)
				this.msgList.push({
					"msg": this.msg,
					"my": true
				})
				// 保证消息可见
				// 回答问题
				//this.msgKf(this.msg)
				// 清除消息
				console.log("清楚消息")
				this.msg = ""
				this.msgGo();
			},
			msgKf(x) {
				console.log("回答问题");
				this.msgList.push({
					my: false,
					msg: "娜娜还在学习中,没能明白您的问题,您点击下方提交反馈与问题,我们会尽快人工处理(无法回答模板)",
					type: 0,
					questionList: ["如何注销用户", "我想了解业务流程", "手机号如何更换"]
				})
				this.msgList.push({
					my: false,
					msg: "单消息模板",
					type: -1
				})
				this.msgList.push({
					my: false,
					msg: "根据您的问题,已为您匹配了下列问题(多个答案模板)",
					type: 2,
					questionList: ["如何注销用户", "我想了解业务流程", "手机号如何更换"]
				})
			},
			historyChat() {

			},
			hideKey() {
				console.log("hidekey");
				uni.hideKeyboard()
			},
			resetChat() {
				console.log("重置对话:");
			},
			//复制
			copyContent(msg) {
				uni.setClipboardData({
					data: msg
				});
			},
		}
	}
</script>

<style lang="scss">
 
</style>